<template>
    <transition 
        enter-active-class="animate__animated animate__backInUp"
        leave-active-class="animate__animated animate__backOutDown"
    >
        <div class="dialog" v-show="visible">
            <header>
                <span @click="$emit('close')">x</span>
                <h1>{{title}}</h1>
            </header>
            <div class="d_con">
                <slot></slot>
            </div>
        </div>
    </transition >
</template>

<script>
export default {
    props:['title','visible']
}
</script>


<style lang="scss">
    .dialog{
        width:100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
        background: #fff;
        z-index:9999;
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity  1s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
</style>